<html>
<head>
    <title>注册</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style type="text/css">
        .main {
            margin-top: 10%;
            background-color: white;
            height: 60%;
            border-radius: 20px 20px 20px 20px;
        }
    </style>
</head>
<body style="background-image: url('./bg.jpg'); background-size: 100% 100%;">
<div class="layui-col-xs4 layui-col-xs-offset4 main">
    <div align="center" style="font-size: 30px;margin-top: 8%;"><b>注册</b></div>
    <div class="layui-col-xs10 layui-col-xs-offset1">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="username" placeholder="用户名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="password" placeholder="密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="name" placeholder="姓名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">email</label>
                <div class="layui-input-block">
                    <input type="text" id="email" placeholder="email" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">qq</label>
                <div class="layui-input-block">
                    <input type="text" id="qq" placeholder="qq" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">phone</label>
                <div class="layui-input-block">
                    <input type="text" id="phone" placeholder="phone" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">wechat</label>
                <div class="layui-input-block">
                    <input type="text" id="wechat" placeholder="wechat" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 2%;">
                <div class="layui-col-xs6 layui-col-xs-offset3">
                    <button style="width: 100%;" type="button" onclick="sub()" class="layui-btn layui-btn-radius">注册
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
</body>
<script type="text/javascript">
    function sub() {
        var username = $("#username").val();
        var password = $("#password").val();
        var name = $("#name").val();
        var email = $("#email").val();
        var qq = $("#qq").val();
        var wechat = $("#wechat").val();
        var phone = $("#phone").val();
        $.post('teacher/register',
            {
                username: username,
                password: password,
                name: name,
                email: email,
                qq: qq,
                wechat: wechat,
                phone: phone
            },
            function (res) {
                if (res.code == "00000") {
                    window.location.href = "index";
                } else {
                    alert(res.message);
                }
            },
            "json")
    }
</script>
</html>